<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/my/service.css" />
	</head>

	<body>
		<div id="service" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">售后服务</h1>
			</header>
			<div class="nav">
				<div :class="{check:check==0}" @tap="checkTap(0)">售后申请</div>
				<div :class="{check:check==1}" @tap="checkTap(1)">申请记录</div>
			</div>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--<div class="service_data">
						<div>订单编号：18032618275280052469</div>
						<div>下单时间：2018-03-30 16:00</div>
						<div class="service_list">
							<div class="service_list_data">
								<div class="service_img"><img src="../../images/network/046909e7-9a98-444c-b3c3-58cbf73b2caa.png" /></div>
								<div class="service_data_text">
									<div class="service_text">雅量超市pop夹标价格牌透明夹式标签牌爆炸贴夹商品...</div>
									<div class="service_money">
										<div class="size">JH01</div>
										<div>¥1.80</div>
									</div>
								</div>
								<div style="margin:6px 4px 0 8px;">X1</div>
							</div>
							<div class="service_footer">
								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">申请退货</button>
							</div>
						</div>
					</div>-->

					<div v-for="list in list">
						<!--申请记录-->
						<div class="service_data" v-if="check">
							<div>订单编号：{{list.subNumber}}</div>
							<div>下单时间：{{list.applyTimeStr}}</div>
							<div class="service_list">
								<div class="service_list_data">
									<div class="service_img"><img v-lazy="imgCommonUrl + list.productImage" /></div>
									<div class="service_data_text">
										<div class="service_text">{{list.productName}}</div>
										<div class="service_money">
											<div class="size" v-show="list.attribute">{{list.attribute}}</div>
											<div>¥{{list.refundAmount}}</div>
										</div>
									</div>
									<div style="margin:6px 4px 0 8px;" v-show="list.basketCount">X{{list.basketCount}}</div>
								</div>
								<div class="service_footer">
									<div class="finish">
										<i class="check" v-show="list.isHandleSuccess == 1"></i>
										<span v-if="list.isHandleSuccess == 0">处理中</span>
										<span v-else="list.applyType == 1">处理完成</span>
										<!--<span v-else>退款失败</span>-->
									</div>
									<span class="finish_right mui-icon mui-icon-arrowright"></span>
								</div>
							</div>
						</div>

						<div class="service_data" v-else>
							<div>订单编号：{{list.subNum}}</div>
							<div>下单时间：{{list.subDateStr}}</div>
							<div class="service_list" v-for="suborder in list.subOrderItemDtos">
								<div class="service_list_data">
									<div class="service_img"><img v-lazy="imgCommonUrl + suborder.pic" /></div>
									<div class="service_data_text">
										<div class="service_text">{{suborder.prodName}}</div>
										<div class="service_money">
											<div class="size">{{suborder.attribute}}</div>
											<div>¥{{suborder.cash}}</div>
										</div>
									</div>
									<div style="margin:6px 4px 0 8px;">X{{suborder.basketCount}}</div>
								</div>
								<div class="service_footer">
									<div class="service_prompt" v-show="suborder.refundState == 2">该商品已申请过售后服务</div>
									<div class="service_prompt" v-show="suborder.refundState == 1">处理中</div>
									<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @tap="returnGoods(list,suborder)" :class="{guoqi:suborder.refundState == 2 || suborder.refundState == 1}">申请退货</button>
								</div>
							</div>
						</div>
					</div>

					<div></div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/noimg.jpg',
				loading: '../../images/noimg.jpg'
			});
			var service = new Vue({
				el: '#service',
				data: {
					imgCommonUrl: common.imageUrl,
					list: [],
					pageNum: 1,
					check: 0,
					urls: ['/userOrder/getData', '/userRefundReturn/getAllList']
				},
				methods: {
					returnGoods: function(list, chiden) {
						if(chiden.refundState == 1 || chiden.refundState == 2) {
							return
						}
						var temp = {
							parent: list,
							chiden: chiden
						}
						common.open('../order/returngoods.html', '../order/returngoods.html', temp)
					},
					checkTap: function(index) {
						if(this.check == index) {
							return
						}
						this.check = index

						mui('#pullrefresh').pullRefresh().refresh(true);
						service.list = []
						service.pageNum = 1
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);

					}
				}
			})

			function pullupRefresh() {
				if(service.check == 0) {
					var data = {
						curPageNO: service.pageNum++,
						state_type: 4
					}
				} else {
					var data = {
						curPageNO: service.pageNum++
					}
				}

				common.ajax(service.urls[service.check], data, function(data) {
					if(data.code == 1) {
						if(data.data.pageCount < service.pageNum) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh()
						}

						console.log(data.data.list)
						service.list = service.list.concat(data.data.list)
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh()
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						}
					}
				}, true, 'get')
			}

			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 10);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
		</script>
	</body>

</html>